<template>
  <div class="container">
    <div class="normal-rank" @scroll="scrollEvent">
      <div class="text">向上滑动</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    //滚动条触发事件
    scrollEvent(e) {
      console.log(
        e.srcElement.scrollTop + e.srcElement.clientHeight,
        e.srcElement.scrollHeight,
      )
      if (
        e.srcElement.scrollTop + e.srcElement.clientHeight >=
        e.srcElement.scrollHeight - 20
      ) {
        alert('触底')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(180deg, #7ccff1 5%, #0a8233 100%);

  .normal-rank {
    position: relative;
    margin-top: 0rem;
    background-image: none;
    width: 80%;
    max-height: 3.5rem;
    border: 2px solid #000;
    border-radius: 20px;
    overflow-y: scroll;
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      font-size: 0.2rem;
      height: 70vh;
      background-image: linear-gradient(180deg, #0a8233 5%, #7ccff1 100%);
    }
  }
}
</style>
